<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{title}}</title>
  <style>* {padding: 0; margin: 0}</style>
  <script>
    !function(ob) {
      ob.hookAjax = function(funs) {
        window._ahrealxhr = window._ahrealxhr || XMLHttpRequest;
        XMLHttpRequest = function () {
          this.xhr = new window._ahrealxhr;
          for(var attr in this.xhr) {
            var type = "";
            try {
              type = typeof this.xhr[attr];
            } catch(e) {}
            if(type === "function") {
              this[attr] = hookfun(attr);
            } else {
              Object.defineProperty(this, attr, {
                get: getFactory(attr),
                set: setFactory(attr)
              })
            }
          }
        }

        function getFactory(attr) {
          return function() {
            return this.hasOwnProperty(attr + "_") ? this[attr + "_"] : this.xhr[attr];
          }
        }

        function setFactory(attr) {
          return function(f) {
            var xhr = this.xhr;
            var that = this;
            if(attr.indexOf("on") != 0) {
              this[attr + "_"] = f;
              return;
            }

            if(funs[attr]) {
              xhr[attr] = function() {
                funs[attr](that) || f.apply(xhr, arguments);
              }
            } else {
              xhr[attr] = f;
            }
          }
        }

        function hookfun(fun) {
          return function() {
            var args = [].slice.call(arguments);
            if(funs[fun] && funs[fun].call(this, args, this.xhr)) {
              return;
            }
            return this.xhr[fun].apply(this.xhr, args);
          }
        }

        return window._ahrealxhr;


      }

      ob.unHookAjax = function() {
        if(window._ahrealxhr) XMLHttpRequest = window._ahrealxhr;
        window._ahrealxhr = undefined;
      }
    }(window)
  </script>
  <script>
    const data = {
      method: 'GET',
      url: '',

    };
    const headers = {};
    hookAjax({
      open(arg) {
        data.method = arg[0];
        data.url = arg[1];
        arg[0] = 'POST';
        arg[1] = 'http://localhost:3000/cats';
      },
      setRequestHeader(...args) {
        console.log(args[0]);
        const [key, value, flg] = args[0]
        if(!flg){
          headers[key] = value;
          return true;
        }
      },
      send(body) {
        console.log("body", body);
        const d = body;
        data['data'] = body;
        console.log("data", data)
        body[0] = JSON.stringify(data);
        console.log("123",headers)
        Object.entries(headers).forEach(([key,value]) => {
          this.setRequestHeader(key,value, true);
        })
        console.log("567");
      }
    });
  </script>
  <script>
    var xhr = new XMLHttpRequest();
    xhr.open("GET", 'http://localhost:3000/ccc/ddd?abc');
    xhr.setRequestHeader('Content-Type', 'application/test');
    xhr.send(JSON.stringify({a:1, b:2}));
  </script>
</head>
<body>
</body>
</html>